<template>
    <div>
        <img :src="headImg" alt="head-img" class="head-img">
        <Form @submit="onSubmit">
            <Field
                    v-model="name"
                    name="name"
                    label="姓名"
                    placeholder="真实姓名"
                    class="input-box margin"
            />
            <Field
                    v-model="IDCADE"
                    name="IDCADE"
                    label="身份证"
                    placeholder="身份证号码"
                    class="input-box"
            />
            <Field
                    v-model="code"
                    type="number"
                    name="code"
                    label="验证码"
                    placeholder="短信验证码"
                    class="input-box"
            >
                <template #button>
                    <Button size="small" :disabled="disabled" @click="sendCode">{{text}}</Button>
                </template>
            </Field>
            <div class="info-box"><span>短信验证码将发送至</span><span class="mobile">{{userInfo.umMobile | plusxing(3,4)}}</span></div>
            <Button text="立即认证" color="#0DCDB5" native-type="submit" class="outh-btn"/>
        </Form>
    </div>
</template>

<script>
    import {Field, Form,Button,Toast} from 'vant';
    import {getSMSCode} from "../api/public";
    import {userRealNameOuth} from "../api/user";
    import {mapGetters} from "vuex";

    const loadImg = name => require(`@/assets/images/${name}.png`)
    export default {
        name: "RealNameOuth",
        components: {
            Field,
            Form,
            Button
        },
        data() {
            return {
                headImg: loadImg('real_name_outh'),
                name:'',
                code:'',
                IDCADE:'',
                text:'获取验证码',
                disabled:false,
            }
        },
        computed:{
            ...mapGetters(['userInfo'])
        },
        filters:{
            plusxing: function (str, frontLen, endLen) {
                let len = str.length - frontLen - endLen;
                let xing = '';
                for (let i = 0; i < len; i++) {
                    xing += '*';
                }
                return str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
            }
        },
        methods:{
            sendCode() {
                if (this.disabled) return;
                this.disabled = true;
                getSMSCode(this.userInfo.umMobile,'User_Authentication').then(res => {
                    Toast(res.msg)
                })
                let n = 60;
                this.text = "剩余 " + n + "s";
                const run = setInterval(() => {
                    n = n - 1;
                    if (n < 0) {
                        clearInterval(run);
                    }
                    this.text = "剩余 " + n + "s";
                    if (this.text < "剩余 " + 0 + "s") {
                        this.disabled = false;
                        this.text = "重新获取";
                    }
                }, 1000);
            },
            onSubmit(values) {
                // console.log('submit', values);
                if (this.name === '') return Toast('请输入姓名！');
                const regIDCADE = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if (!regIDCADE.test(this.IDCADE)) return Toast('请输入正确的身份证号码！');
                if (this.code === '') return Toast('请输入验证码！');
                userRealNameOuth(this.userInfo.umId,this.name,this.IDCADE,this.code).then(res => {
                    Toast(res.msg);
                    if (res.code) return this.$router.push({name:'OuthInfo',params:values})
                })

            },
        }
    }
</script>

<style scoped lang="scss">
    .head-img {
        display: block;
        height: 145px;
    }
    .margin{
        margin-top: 40px;
    }
    .input-box{
        width:335px;
        height:50px;
        background:rgba(255,255,255,1);
        border-radius:8px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
    .info-box{
        font-size:14px;
        font-weight:400;
        color:rgba(163,165,177,1);
        text-align: center;
        .mobile{
            color: #42455F;
        }
    }
    .outh-btn{
        width:305px;
        height:50px;
        border-radius:6px;
        display: block;
        margin: 50px auto 0;
    }
</style>
